import React, {Component} from 'react';
import {getDetail} from "../../api/news";

class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            newsDetail: [],
        }
    }


    componentDidMount() {
        console.log(this.props);
        /* 如果是 query 传递参数则使用去下面查找 */
        // this.props.location.query.id;

        let newsId = this.props.match.params.id ? this.props.match.params.id : this.props.location.query.id;

        /*如果的动态参数传递，则要去*/
        // let newsId = this.props.match.params.id;

        this.getNewsDetail(newsId);

    }

    getNewsDetail = async (newsId) => {

        let info = await getDetail(newsId);
        // console.log(info.data);
        if (info.data.statusCode == 200) {
            let newsDetail = info.data.data.info;
            console.log(newsDetail);
            this.setState({
                newsDetail,
            })

        } else {
            alert('系统繁忙！');
        }

    }
    goBack = () => {
        console.log(this.props.history);
        // this.props.history.goBack();
        this.props.history.go(-1); // -1 代表当前页面的上一页
    }


    render() {
        console.log(this.props.match.params.id);
        let {title, author, viewCount, description, imageUrl} = this.state.newsDetail;


        return (
            <div>
                <h1>{title}</h1>
                <button onClick={this.goBack}>返回</button>
                <p>作者：{author}</p>
                <p>浏览数：{viewCount}</p>
                <div>
                    <img src={'https://yw.52kfw.cn' + imageUrl} alt=""/>
                </div>
                <div>
                    {description}
                </div>

                {/*<h2>新闻详情页面-{this.props.match.params.id}</h2>*/}
                {/*<p>调用详情接口进行新闻详情的获取</p>*/}

            </div>
        );
    }
}

export default Index;
